<template>
  <NuxtLayout name="default" :showBackGround="true" :showBarTitle="true" :showVanCheckbox="true" :showIcon="false"
    :showAnotherLogin="false">
    <VanSpace direction="vertical" fill>
      <VanButton v-for="(item, index) in buttonItems" :key="index" :type="item.type" :block="item.block"
        :icon="item.icon" :size="item.size" @click="item.click" round>
        {{ item.context }}
      </VanButton>
    </VanSpace>
  </NuxtLayout>
</template>

<script setup lang="ts">
definePageMeta({ layout: false });
const buttonItems = [
  {
    type: "primary", icon: "phone",
    size: "normal", block: true,
    click: () => navigateToUserLoginPage('phoneCodeLoginContext'),
    context: localesGetValueForKey("buttonMsg.phoneCodeLoginContext", "手机验证码登录")
  },
  {
    type: "primary", icon: "friends",
    size: "normal", block: true,
    click: () => navigateToUserLoginPage('userNamePwdLoginContext'),
    context: localesGetValueForKey("buttonMsg.userNamePwdLoginContext", "用户账号密码登录")
  },
] as Array<ButtonGroupAction>;
onBeforeMount(() => {
  // init user agreement,if user agreement is undefined set user agreement on before mount
  // you must change user agreement on before mount of user login
  useMyUserLoginStoreStore().initUserDataForInstanceInRegion(false);
});
</script>

<style lang="css">
.text-area-show {
  @apply text-blue-500 text-center text-xs;
}

.text-area-show-link {
  @apply text-blue-800 text-center text-xs underline;
}
</style>